<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue全局组件案例</title>
    <script src="vue.js"></script>
<style>
    .template{
        border: 1px dashed black;
        border-radius: 15px;
        padding: 10px;
        width: 200px;
        height: 160px;
        text-align: center;
        float: left;
        margin-right: 50px;
        margin-bottom: 50px;
        box-shadow: 10px 10px 5px dimgray;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,green), color-stop(100%,yellow));;
    }

</style>
</head>

<body>
    <template id="t1">
        <div class="template">
            <h3>helloworld</h3>
            <h4>蜗牛学员</h4>
        </div>
    </template>
    <div id="app1" style="background-color: green;">
        <helloworld></helloworld>
        <helloworld></helloworld>
        <helloworld></helloworld>
        <helloworld></helloworld>
        <helloworld></helloworld>
    </div>
    <div id="app2" style="background-color: red;">
        <helloworld></helloworld>
        <helloworld></helloworld>
        <helloworld></helloworld>
        <helloworld></helloworld>
        <helloworld></helloworld>
    </div>

</body>

</html>
<script>
    //全局组件，template中必须只有一个根节点
    Vue.component("helloworld", {
        template: "#t1"
    });
    var vm = new Vue({
        el: "#app1",

    })
    var vm = new Vue({
        el: "#app2",

    })
</script>